<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task</title>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600");

    .container {
      font-family: 'Open Sans';
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      font-weight: 300;
      height: 100vh;
    }

    .container .images {
      background: #FFF;
      width: 50%;
      overflow-y: hidden;
    }

    .container .images .image {
      background-color: #F6F6F6;
      margin: 10px 0;
      height: calc(50vh - 20px);
      position: relative;
    }

    .container .images .image::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background: #FFF;
      height: 30vh;
      width: 40vw;
      left: 5vw;
      top: 10vh;
      border-radius: 5px;
      box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0.025);
    }

    .container .copy {
      width: 50%;
      background: #FFF;
      overflow-y: auto;
    }

    .container .copy .frame {
      box-sizing: border-box;
      color: #121212;
      padding: 10vh;
      font-size: calc(2vw);
      height: 100vh;
      line-height: 1.6;
    }
  </style>

</head>

<body>
  <script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js">
  </script>
  <script>
    'use strict';

    $(function () {
      $('.copy').on('scroll', function () {
        var scrollTop = $(this).scrollTop() + $(this).height();
        var scrollHeight = $(this)[0].scrollHeight;

        var percent = scrollTop / scrollHeight * 100;
        // console.log(percent);

        // Get percent of images
        var imageHeight = $('.images')[0].scrollHeight;
        // console.log(imageHeight);

        var imagePercent = imageHeight * percent / 100;

        $('.images').scrollTop(imagePercent - $('.copy').height());
      });
    });

    $(window).on('load', function () {
      var i = 0;

      setInterval(function () {
        $('.copy').animate({
          scrollTop: i + 'px'
        }, 1);
        i = i + 2;
      }, 1);
    });
  </script>
  <div class="container">
    <div class="images">
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
    </div>
    <div class="copy">
      <div class="frame">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aspernatur, modi. Sapiente cupiditate nobis
        labore saepe beatae, earum. Veritatis, culpa.
      </div>
      <div class="frame">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aspernatur, modi. Sapiente cupiditate nobis
        labore saepe beatae, earum. Veritatis, culpa.
      </div>
      <div class="frame">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aspernatur, modi. Sapiente cupiditate nobis
        labore saepe beatae, earum. Veritatis, culpa.
      </div>
      <div class="frame">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, aspernatur, modi. Sapiente cupiditate nobis
        labore saepe beatae, earum. Veritatis, culpa.
      </div>
    </div>
  </div>
</body>

</html>